<template>
  <el-table :data="data" ref="DFTable" class="DF-common-table" :height="height"
    :element-loading-text="$t('common.loadingText')" v-bind="$attrs" v-on="$listeners"
    :border="border"
    stripe
    highlight-current-row
    header-row-class-name="self-row-header"
    header-cell-class-name="self-cell-header">
    <el-table-column type="selection" width="50" v-if="hasC" align="center" />
    <el-table-column type="index" width="50" label="序号" v-if="hasNO" align="center" />
    <slot></slot>
    <template slot="empty">
      <el-empty description="暂无数据" :image-size="120"></el-empty>
    </template>
  </el-table>
</template>

<script>
export default {
  name: 'DF-table',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    columnData: {
      type: Array,
      default: () => []
    },
    // 序号 默认有
    hasNO: {
      type: Boolean,
      default: true
    },
    // 多选框 默认无
    hasC: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: false
    },
    height: {
      default: '100%'
    }
  },
  watch: {
    data: {
      handler(val) {
        if (!val) return
        this.doLayout()
      },
      deep: true
    },
    columnData: {
      handler(val) {
        if (!val) return
        this.doLayout()
      },
      deep: true
    }
  },
  methods: {
    doLayout() {
      setTimeout(() => {
        this.$nextTick(() => {
          this.$refs.DFTable.doLayout()
        })
      }, 50)
    }
  }
}
</script>
<style lang="scss" >
.el-table th>.cell{
  font-weight: bold !important;
  font-size: 14px;
}
.el-table .cell {
  font-size: 13px;
}
.el-table .self-row-header .self-cell-header {
  background: #fafafa;
}
.el-table .self-row-header .self-cell-header .cell {
  //font-size: 12px;
  //color: #2e3233;
}
.el-table.el-table--small td, .el-table.el-table--small th{
  padding: 5px 0;
}
.el-table__row .el-button--small, .el-table__row .el-button--small.is-round{
  padding: 0 15px;
}
// 滚动条的宽度
.el-table .el-table__body-wrapper::-webkit-scrollbar {
  width: 5px;
  height: 10px;
}
// 滚动条的滑块
.el-table .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #a1a3a9;
  border-radius: 3px;
}
// 如果是整个页面的滚动条风格是一致的，直接改全局的滚动条样式也可以有效果
// 滚动条的宽度
::-webkit-scrollbar {
  width: 5px;
  height: 10px;
}
</style>
